<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>个人主页</title>
<#include "/views/rec.html">
</head>
<body>
<#include "/views/nav.html">
<div class="ui grid">
    <div class="ui sixteen wide column">
        <div class="ui secondary segment">
            <div class="ui horizontal list">
                <div class="item">
                    <img class="ui small avatar image" src="../images/avatar/tom.jpg">
                    <div class="content" style="width: 25rem;">
                        <h3 class="header">小柯奇思妙想</h3>
                        <div class="meta" style="margin: 0.5rem 0;">
                            <span class="cinema"><i class="heart icon"></i>100</span>
                            <span class="cinema"><i class="thumbs outline up icon"></i>10</span>
                            <span class="cinema"><i class="unhide icon"></i>20</span>
                        </div>
                        <div class="description" style="margin: 0.5rem 0;">
                            <p>Hero comes and goes,but lengends are forever.</p>
                        </div>
                        <div class="extra">
                            <a class="ui teal tag label">Java</a><a class="ui yellow tag label">javaScript</a><a
                                class="ui green tag label">C#</a>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img class="ui tiny avatar image">
                    <div class="content">
                        <div class="description" style="margin: 0.5rem 0;">
                            <div class="ui statistic">
                                <div class="value">
                                    5,550
                                </div>
                                <div class="label">
                                    访问量
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img class="ui tiny avatar image">
                    <div class="content">
                        <div class="description" style="margin: 0.5rem 0;">
                            <div class="ui statistic">
                                <div class="value">
                                    5,550
                                </div>
                                <div class="label">
                                    评论数
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img class="ui tiny avatar image">
                    <div class="content">
                        <div class="description" style="margin: 0.5rem 0;">
                            <div class="ui statistic">
                                <div class="value">
                                    5,550
                                </div>
                                <div class="label">
                                    排名
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="ui container grid">
    <div class="ui twelve wide column">
    
    <#if pageInfo?? && pageInfo.list?? && pageInfo.list?size gt 0>
    	<#list pageInfo.list as item>
        <div class="ui raised attached segment">
            <h4><a href="<@full_path path='p/${userName}/detail/${item.id}.jhtml' />">${item.title!}</a></h4>
            <a class="ui red ribbon label"><#if item.createTime??>${item.createTime?string("yyyy-MM-dd HH:mm:ss")}</#if></a>
            <div class="ui content">
            ${item.summary!}
            </div>
        </div>
        <div class="ui right aligned raised attached segment">
            <div class="ui horizontal link list">
                <a class="item">
                    <i class="comment icon"></i>
                    评论
                </a>
                <a class="item">
                    <i class="heart icon"></i>
                    喜欢
                </a>
                <a class="item">
                    <i class="thumbs outline up icon"></i>
                    点赞
                </a>
            </div>
        </div>
        <div class="ui section divider"></div>
        </#list>
      </#if>
      <div style="float: right;">
      	<@page_nav />
      </div>
    </div>

    <div class="ui four wide column">
        <div class="ui segment">
            <div class="ui icon input">
                <i class="search icon"></i>
                <input type="text" placeholder="Search...">
            </div>
        </div>
        <div class="ui segment">
            <div class="ui header">分类归档</div>
            <div class="ui content">
                <div class="ui bulleted list">
                    <#if articleCountVo?? && articleCountVo.categoryList?? && articleCountVo.categoryList?size gt 0>
                    	<#list articleCountVo.categoryList as item>
                   			 <a class="item" href="<@full_path path='p/${userName!}/category/${item.val!}.jhtml' />">${item.name!}(${item.num!'0'})</a>
                    	</#list>
                    </#if>
                </div>
            </div>
        </div>
        <div class="ui segment">
            <div class="ui header">时间归档</div>
            <div class="ui content">
                <div class="ui bulleted list">
                      <#if articleCountVo.timeList?? && articleCountVo.timeList?size gt 0>
                    	<#list articleCountVo.timeList as item>
                   			 <a class="item" href="<@full_path path='p/${userName}/date/${item.val!}.jhtml' />">${item.name!}(${item.num!'0'})</a>
                    	</#list>
                    </#if>
                </div>
            </div>
        </div>
        <div class="ui segment">
            <a class="ui tag label">New</a>
            <a class="ui red tag label">Upcoming</a>
            <a class="ui teal tag label">Featured</a>
        </div>
    </div>
</div>
<script type="text/javascript" src="<@full_path path='js/article/list.js' />"></script>
</body>
</html>